<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分页器</title>
	<script src="jquery-1.12.3.min.js"></script>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		span{
			display: block;
			width: 68px;
			height: 38px;
			border:1px solid skyblue;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
			float: left;
		}
		div{
			height: 40px;
			width: 498px;
			float: left;
			overflow: hidden;
			margin-right: 10px;
		}
		ul{
			width: 1000px;
			height: 40px;
		}
		ul li{
			float: left;
			list-style: none;
			width: 38px;
			height: 38px;
			text-align: center;
			line-height: 40px;
			border:1px solid skyblue;
			margin-right: 10px;
			cursor: pointer;
			color: skyblue;
		}
		ul .active{
			border:none;
			color: black;
		}
		span:hover{
			background-color: blue;
			color: white;
		}
	</style>
</head>
<body>
	<span class="toLeft">上一页</span>
	<div>
		<ul class="">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
		</ul>
	</div>
	<span class="toRight">下一页</span>

	<script>
	$(function(){
		var index=0;
		var lis=$("ul").find("li");
		lis.click(function(){
			lis=$("ul").find("li");
			index=$(this).index();
			
			$(this).addClass("active").siblings().removeClass("active");

			if (index>=6) {
				var x= 5-index;
				if (x<0) {
					x=-x;
				}
				if (x>=10) {
					x=10;
				}
				$("ul").css("margin-left",-x*50+"px")
			}else{
				$("ul").css("margin-left","0px")
			}
		});
		$(".toLeft").click(function(){
			index--;
			$("ul").find("li").eq(index).addClass("active").siblings().removeClass("active");
			if (index<=0) {
				index=0;
				$("ul").find("li").eq(0).addClass("active").siblings().removeClass("active");
			}
			if (index>=6) {
				var x= 5-index;
				if (x<0) {
					x=-x;
				}
				if (x>=10) {
					x=10;
				}
				$("ul").css("margin-left",-x*50+"px")
			}else{
				$("ul").css("margin-left","0px")
			}
		})
		$(".toRight").click(function(){
			index++;
			$("ul").find("li").eq(index).addClass("active").siblings().removeClass("active");
			if (index>=19) {
				index=19;
				$("ul").find("li").eq(19).addClass("active").siblings().removeClass("active");
			}
			if (index>=6) {
				var x= 5-index;
				if (x<0) {
					x=-x;
				}
				if (x>=10) {
					x=10;
				}
				$("ul").css("margin-left",-x*50+"px")
			}else{
				$("ul").css("margin-left","0px")
			}
		})
	})
	</script>
</body>
</html>